<template>
  <div style="position: absolute;top: 0;">
    <i class="iconfont icon-zuojiantou" @click="goBack"></i>
    <i class="iconfont icon-youjiantou" @click="shop_xiangxi"></i>
    <div class="shop_detail_header">
      <img src="../assets/e6be10c95466b166.jpg" alt="" class="shop_detail_img">
      <div class="shopHead">
        <div class="shop">{{shop_all.name}}</div>
        <div class="shopMiddle">
          <span>商家配送/</span><span>分钟送达/</span><span>配送费￥5</span>
        </div>
        <div class="shopFooter">
          <span>{{shop_all.promotion_info}}</span>
        </div>
      </div>
      <div class="youhui">
        <span>减<span>满30减5,满60减8(App专享)</span></span><span>1个活动</span>
      </div>
    </div>
    <van-tabs v-model="active" class="change_shop_type">
      <van-tab title="商品" class="type">
        <food :menuList="menuList" :foodtypes="foodtypes" :foodList="foodList" @totleMoney="adjustTotleAction"></food>
        <cart class="cart" :totalMoney="totalMoney"></cart>
      </van-tab>
      <van-tab title="评价" class="type">
        {{appraise_scores}}
        {{appraise_tags}}
        {{appraise_list}}
      </van-tab>
    </van-tabs>
    <food :menuList="menuList" :foodtypes="foodtypes" :foodList="foodList" @totleMoney="adjustTotleAction"></food>
    <cart class="cart" :totalMoney="totalMoney"></cart>
  </div>
</template>
<script>
  import Cookie from "js-cookie";
  import food from "@/components/food.vue";
  import cart from "@/components/cart.vue";
  export default {
    name: "goShopping",
    data() {
      return {
        shop_id: "",
        shop_all: {},
        menuList: [],
        foodList: [],
        foodtypes: [],
        url: "",
        active: 0,
        totalMoney: 0,
        show: false,
        cartshow: false,
        appraise_scores: [],
        appraise_tags: [],
        appraise_list: [],
      }
    },
    components: {
      food,
      cart,
    },
    
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.shop_all = Cookie.get("shopId");
        console.log(vm.shop_all);
        vm.shop_id = Cookie.get("shop_id") * 1 + 1;
        const request1 = vm.axios.get("https://elm.cangdu.org/shopping/restaurant/" + vm.shop_all)
        const request2 = vm.axios.get("https://elm.cangdu.org/shopping/v2/menu?restaurant_id=" + vm.shop_id)
        //评价    https://elm.cangdu.org/ugc/v2/restaurants/3269/ratings?has_content=true&offset=0&limit=10&tag_name=
        //评分
        const request3 = vm.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/" + vm.shop_all + "/ratings/scores");
        //分类
        const request4 = vm.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/" + vm.shop_all + "/ratings/tags")
        //评价
        const request5 = vm.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/" + vm.shop_all + "/ratings?has_content=true&offset=0&limit=10&tag_name=")
        vm.axios.all([request1, request2, request3, request4, request5]).then(vm.axios.spread((res1, res2, res3, res4, res5) => {
          vm.shop_all = res1.data;
          vm.menuList = res2.data;
          vm.foodtypes = res2.data;
          vm.foodList = vm.menuList;
          vm.appraise_scores = res3.data;
          vm.appraise_tags = res4.data;
          vm.appraise_list = res5.data;
          console.log(vm.menuList);
        })).catch(err => console.log(err));
      });
    },
    methods: {
      changeMenu(index) {
        console.log(index);
      },
      adjustTotleAction(money) {
        this.totalMoney += money;
      },
      goBack() {
        this.$router.go(-1);
      },
      shop_xiangxi() {
        this.$router.push({ name: 'shopDetail' });
      },
      commitOrder() {
        this.$router.push({ name: 'commitOrder' });
      },
      showCart() {
        this.cartshow = !this.cartshow;
        console.log(this.cartshow);
      }
    }
  }
</script>
<style lang="less" scoped>
  .body {
    padding: 0;
  }

  /*购物车*/
  .cart {
    position: fixed;
    bottom: 51px;
    /*no*/
    background-color: red;
    transition: all 0.5s linear;
  }

  /*头部样式*/
  .shop_detail_img {
    float: left;
    border-radius: 0.15rem;
    width: 25%;
  }

  .shopHead {
    width: 75%;
    float: left;
    font-size: 0.35rem;
    text-align: left;
    padding: 0 0 0 0.2rem;
    color: white;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
  }

  .shop_detail_header {
    padding: 0.3rem;
    background-color: rgb(191, 184, 199);
    overflow: hidden;
  }

  .shop {
    margin-bottom: 0.1rem;
    font-size: 0.4rem;
    font-weight: 600;
  }

  .shopMiddle {
    margin-bottom: 0.15rem;
  }

  .youhui {
    font-size: 0.35rem;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    color: white;
    letter-spacing: 0.02rem;
  }

  .buy_cart_container {
    background-color: burlywood;
    width: 100%;
    height: 7%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
  }

  .buy_cartLeft {
    width: 70%;
    background-color: black;
  }

  .buy_cartRight {
    width: 30%;
    background-color: #4cd964;
    color: white;
    font-weight: 600;
    font-size: 0.5rem;
    padding: 0.3rem 0;
  }

  .buy_cartPrice {
    color: white;
    float: left;
    height: 100%;
  }

  .buy_cartImg {
    float: left;
  }

  .cart_price {
    font-size: 0.5rem;
    font-weight: 600;
    margin-top: 0.2rem;
    letter-spacing: 0.03rem;
  }

  .icon-shangcheng1 {
    color: deepskyblue;
    font-size: 1rem;
    margin: 0 0.5rem;
  }

  .icon-zuojiantou {
    left: 0rem;
    font-size: 0.7rem;
    position: absolute;
    top: 0;
    color: white;
  }

  .icon-youjiantou {
    position: absolute;
    font-size: 0.6rem;
    right: 0.2rem;
    color: white;
    top: 0.9rem;
  }

  /deep/.van-tabs__wrap {
    height: 40px;
    /* no */
  }

  /deep/.van-tabs__nav {
    height: 40px;
    /* no */
  }

  /deep/.van-tab__text {
    height: 30px;
    /* no */
    font-size: 15px;
    /* no */
    padding-top: 30px;
  }
</style>